<template>
  <view class="detail-container">
    <custom-nav-bar title="房源详情" />
    
    <scroll-view scroll-y class="content-wrapper">
      <!-- 房源图片轮播 -->
      <swiper class="house-swiper" indicator-dots autoplay circular>
        <swiper-item v-for="(img, index) in houseInfo.images" :key="index">
          <image :src="img" mode="aspectFill" class="swiper-image" />
        </swiper-item>
      </swiper>

      <!-- 房源基本信息 -->
      <view class="base-info card">
        <price :value="houseInfo.price" size="large" />
        <view class="title">{{ houseInfo.title }}</view>
        <view class="meta">
          <text>{{ houseInfo.area }}㎡</text>
          <text>{{ houseInfo.roomType }}</text>
          <text>{{ houseInfo.orientation }}</text>
        </view>
      </view>

      <!-- 房源详细信息 -->
      <house-detail-card :data="houseInfo" />

      <!-- 联系房东 -->
      <contact-landlord :landlord="houseInfo.landlord" />
    </scroll-view>

    <!-- 底部操作栏 -->
    <view class="footer-bar">
      <button class="contact-btn" @click="handleContact">联系房东</button>
      <button class="rent-btn" @click="handleRent">立即预约</button>
    </view>
  </view>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { onLoad } from '@dcloudio/uni-app'
import { getHouseDetail } from '@/api/houseApi'
import type { HouseDetail } from '@/types/house'

const houseInfo = ref<HouseDetail>({} as HouseDetail)

onLoad(async (options) => {
  if (options?.id) {
    try {
      const res = await getHouseDetail(options.id)
      houseInfo.value = res.data
    } catch (err) {
      uni.showToast({ title: '获取详情失败', icon: 'none' })
      uni.navigateBack()
    }
  }
})

const handleContact = () => {
  uni.makePhoneCall({
    phoneNumber: houseInfo.value.landlord.phone
  })
}

const handleRent = () => {
  uni.navigateTo({
    url: '/pages/tenant/order/create?houseId=' + houseInfo.value.id
  })
}
</script>

<style lang="scss" scoped>
.detail-container {
  height: 100vh;
  display: flex;
  flex-direction: column;

  .content-wrapper {
    flex: 1;
    padding: 20rpx 30rpx;
  }

  .house-swiper {
    height: 500rpx;
    border-radius: 16rpx;
    overflow: hidden;

    .swiper-image {
      width: 100%;
      height: 100%;
    }
  }

  .base-info {
    padding: 30rpx;
    margin-top: 20rpx;

    .title {
      font-size: 32rpx;
      color: #333;
      margin: 15rpx 0;
    }

    .meta {
      font-size: 24rpx;
      color: #999;
      display: flex;
      gap: 20rpx;
    }
  }

  .footer-bar {
    height: 100rpx;
    padding: 10rpx 30rpx;
    background: #fff;
    display: flex;
    align-items: center;
    justify-content: space-between;
    box-shadow: 0 -4rpx 20rpx rgba(0,0,0,0.05);

    button {
      flex: 1;
      height: 80rpx;
      line-height: 80rpx;
      border-radius: 40rpx;
      font-size: 28rpx;

      &.contact-btn {
        background: #f5f5f5;
        color: #333;
        margin-right: 20rpx;
      }

      &.rent-btn {
        background: #2979FF;
        color: #fff;
      }
    }
  }
}
</style>